<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 床位管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!--      <div class="handle-box">-->
      <!--        <el-input-->
      <!--            v-model="query.name"-->
      <!--            placeholder="房间号"-->
      <!--            class="handle-input mr10"-->
      <!--        ></el-input>-->
      <!--        <el-button type="primary" icon="el-icon-search" @click="handleSearch"-->
      <!--        >搜索-->
      <!--        </el-button-->
      <!--        >-->
      <!--      </div>-->
      <!--      <div style="display: flex">-->
      <!--        <el-form :inline="true" :model="inputDate" class="demo-form-inline">-->
      <!--          <el-form-item label="所属校区">-->
      <!--            <el-input v-model="inputDate.region" disabled/>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="公寓名称">-->
      <!--            <el-input v-model="inputDate.name" disabled/>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="住宿类型">-->
      <!--            <el-input v-model="inputDate.type" disabled/>-->
      <!--          </el-form-item>-->

      <!--        </el-form>-->
      <!--      </div>-->
      <el-divider/>
      <div class="clist">
        <div><i class="el-icon-s-data"></i>床位信息列表</div>
      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in props"
            :key="item.prop"
        >
        </el-table-column>
        <!--        <el-table-column label="床位状态">-->
        <!--          <template #default="scope">-->
        <!--            -->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
              >编辑
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row.sid)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!--        <div class="pagination">-->
      <!--          <el-pagination-->
      <!--              :currentPage="query.pageNum"-->
      <!--              :page-sizes="[10, 20, 40]"-->
      <!--              :page-size="query.pageSize"-->
      <!--              layout="total, sizes, prev, pager, next, jumper"-->
      <!--              :total="pageTotal"-->
      <!--              @size-change="handleSizeChange"-->
      <!--              @current-change="handlePageChange"-->
      <!--          >-->
      <!--          </el-pagination>-->
      <!--        </div>-->
    </div>

    <div>
      <el-dialog title="信息" v-model="dialogVisible" width="50%">
        <el-form :model="entity" label-width="100px">
          <el-form-item label="床位号">
            <el-input v-model="entity.name" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import request from "../../utils/request";
import {useStore} from "vuex";

export default {
  name: "BedEdit",
  setup() {
    const root = "/bed/";
    const rootRoom = "/room/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const props = [
      {label: "床位号", prop: "name"},
      {label: "房间号", prop: "roomName"},
      {label: "床位状态", prop: "studentIds"},
    ];

    const query = reactive({
      studentId: "",
      roomId: "",
      name: "",
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const inputDate = reactive({
      name: "", //公寓名称
      type: "",//类型
      floorNum: "", //楼层数量
      region: "",
    });
    if (route.query.roomId) {
      query.roomId = route.query.roomId
    }
    // childrenDte.value = res.data.buildingList;
    const childrenDte = ref([]);
    // 获取表格数据
    const getData = () => {
      request
          .get(root + "page", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = []
            } else {
              tableData.value = res.data.records;
              for (var i = 0; i < tableData.value.length; i++) {
                if (tableData.value[i].studentId === null) {
                  tableData.value[i].studentIds = "空闲"
                } else {
                  tableData.value[i].studentIds = "已入住"
                }
              }
              pageTotal.value = res.data.total;
            }
          });
    };
    getData();

    // // 查询操作
    // const handleSearch = () => {
    //   query.pageNum = 1;
    //   getData();
    // };
    // // 分页大小
    // const handleSizeChange = (val) => {
    //   query.pageSize = val;
    //   getData();
    // };
    // // 分页导航
    // const handlePageChange = (val) => {
    //   query.pageNum = val;
    //   getData();
    // };
    // const getData = () => {
    //   request
    //       .get(root + "page", {
    //         params: query,
    //       })
    //       .then((res) => {
    //         if (res.code == 18) {
    //           ElMessage.warning(res.msg);
    //           tableData.value=[]
    //         } else {
    //           tableData.value = res.data.records;
    //           pageTotal.value = res.data.total;
    //         }
    //       });
    // };
    // getData();

    // 查询操作
    // const handleSearch = () => {
    //   query.pageNum = 1;
    //   getData();
    // };
    // // 分页大小
    // const handleSizeChange = (val) => {
    //   query.pageSize = val;
    //   getData();
    // };
    // // 分页导航
    // const handlePageChange = (val) => {
    //   query.pageNum = val;
    //   getData();
    // };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete(root + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
                getData()
              } else {
                ElMessage.error("删除失败");
                getData()
              }
            });
          })
          .catch(() => {
          });
    };

    // 新增操作
    // const handleAdd = () => {
    //   router.push("/admin/addCollege");
    // };
    const dialogVisible = ref(false);
    const entity = ref({
      name: "",
      sid: "",
      studentId:"",
    })
    const handleEdit = (row) => {
      console.log(row)
      dialogVisible.value = true
      entity.value.sid = row.sid
      entity.value.name = row.name
      entity.value.studentId=row.studentId
    };

    const save = () => {
      request.put("/bed/update", entity.value).then(res => {
        console.log(res)
        if (res.code === '0') {
          ElMessage.success("更新成功")
        } else {
          ElMessage.error(res.msg)
        }
        getData() // 刷新表格的数据
        dialogVisible.value = false  // 关闭弹窗
      })
    }
    return {
      props,
      query,
      tableData,
      pageTotal, dialogVisible, entity,
      // editVisible,
      // form,
      inputDate,
      childrenDte,
      getData, save,
      // handleSearch,
      // handleSizeChange,
      // handlePageChange,
      // handleAdd,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
